<template>
  <el-card shadow="never" header-class="recharge-card-header" v-if="visibleRecharge">
    <template #header>
      <span style="font-weight: bold">{{rechargeTitle}}</span>
    </template>
    <el-table :data="RechargeDataList" border style="width: 100%" size="default">
      <el-table-column prop="Sort" label="序号" width="60" align="center" />
      <el-table-column prop="RechargeTypeText" label="充值品类" />
      <el-table-column prop="RechargeWayText" label="充值方式" width="180" />
      <el-table-column prop="Amount" label="充值额度">
        <template #default="scope">
          <el-input-number v-model="scope.row.Amount" :precision="scope.row.Precision" placeholder="请输入充值额度" controls-position="right" size="default" style="width: 100%" />
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <el-card shadow="never" style="margin-top: 20px" header-class="recharge-card-header">
    <template #header>
      <span style="font-weight: bold">配套产品价格</span>
    </template>
    <el-table :data="productData" border style="width: 100%" size="default">
      <el-table-column prop="ID" label="序号" width="60" align="center">
        <template #default="scope">
          {{scope.row.ID||'新'}}
        </template>
      </el-table-column>
      <el-table-column prop="ProductName" label="产品名称" />
      <el-table-column prop="Price" label="产品原价（点卷）" width="180">
        <template #default="scope">
          <div style="display:flex;align-items:center">
            {{scope.row.Price}}
            <el-icon v-if="scope.row.Trend==='up'" color="#F56C6C" style="font-weight:bold"><Top /></el-icon>
            <el-icon v-if="scope.row.Trend==='down'" color="#67C23A" style="font-weight:bold"><Bottom /></el-icon>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="Amount" label="拿货价（点卷）">
        <template #default="scope">
          <el-input-number v-model="scope.row.Amount" :precision="2" placeholder="请输入拿货价" controls-position="right" size="default" style="width: 100%" />
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup name="OrderRecharge">
  import { ref, watch, nextTick } from 'vue';
  import lodash from 'lodash';

  const productData = defineModel('productData', {
    type: Array,
    default: () => []
  })

  const RechargeData = defineModel('rechargeData', {
    type: Object,
    default: () => {
      return {
        PointRollAmount: null,
        PointRollGiftAmount: null,
        PadAmount: null,
        PadGiftAmount: null
      }
    }
  })

  defineProps({
    rechargeTitle: {
      type: String,
      default: '充值额度配置'
    },
    visibleRecharge: {
      type: Boolean,
      default: true
    }
  })

  const updateRechargeModel = ref(false);

  const RechargeTemplate = [
    {
      Sort: 1,
      RechargeType: 1,
      RechargeTypeText: '点卷',
      RechargeWay: 1,
      RechargeWayText: '实充',
      Amount: 0,
      Precision: 2
    },
    {
      Sort: 2,
      RechargeType: 1,
      RechargeTypeText: '点卷',
      RechargeWay: 2,
      RechargeWayText: '赠品',
      Amount: 0,
      Precision: 2
    },
    {
      Sort: 3,
      RechargeType: 2,
      RechargeTypeText: '单词运动学习机（台）',
      RechargeWay: 1,
      RechargeWayText: '实充',
      Amount: 0,
      Precision: 0
    },
    {
      Sort: 4,
      RechargeType: 2,
      RechargeTypeText: '单词运动学习机（台）',
      RechargeWay: 2,
      RechargeWayText: '赠品',
      Amount: 0,
      Precision: 0
    }
  ];
  const RechargeDataList = ref(lodash.cloneDeep(RechargeTemplate));

  watch(
    () => RechargeData.value,
    (newVal, oldVal) => {
      if (newVal === null && oldVal === null) return;
      if (newVal === null) {
        updateRechargeModel.value = false;
        RechargeDataList.value = lodash.cloneDeep(RechargeTemplate);
        nextTick().then(() => {
          updateRechargeModel.value = true;
        })
        return;
      }
      if (oldVal === null || JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
        updateRechargeModel.value = false;

        RechargeDataList.value[0].Amount = newVal.PointRollAmount;
        RechargeDataList.value[1].Amount = newVal.PointRollGiftAmount;
        RechargeDataList.value[2].Amount = newVal.PadAmount;
        RechargeDataList.value[3].Amount = newVal.PadGiftAmount;

        nextTick().then(() => {
          updateRechargeModel.value = true;
        })
      }
    },
    { deep: true, immediate: true }
  )

  watch(
    () => RechargeDataList.value,
    (newVal) => {
      if(updateRechargeModel.value){
        RechargeData.value.PointRollAmount = newVal[0].Amount;
        RechargeData.value.PointRollGiftAmount = newVal[1].Amount;
        RechargeData.value.PadAmount = newVal[2].Amount;
        RechargeData.value.PadGiftAmount = newVal[3].Amount;
      }
    },
    { deep: true }
  )
</script>

<style>
  .recharge-card-header {
    background-color: var(--el-color-primary-light-9);
  }
  .el-input-number .el-input__inner {
    text-align: left;
  }
</style>
